Fill in your content, choose your colors, click Generate. The tool writes the code — you just add your photos and upload.
The Landing Page Builder uses your Anthropic API key to send your content to Claude, which writes a complete, production-ready HTML page. You preview it in the tool, download it, add your photos, and upload everything to your server. No coding required.
Your key connects the tool to Claude. It's saved in your browser only — it never leaves your computer.
Your business info, colors, copy for each section of the page. Take your time — better content produces a better page.
Claude writes the full HTML page (~30 seconds). A live preview appears on the right.
You get an index.html file and an images/ folder with a README explaining exactly which photos to add.
Name your photos exactly as specified, drop them in the images/ folder, and upload everything to your server. Done.
You need an Anthropic API key to use this tool. Getting one takes about two minutes.
Create a free account or sign in.
Click "Create Key," give it a name (e.g. "Landing Page Builder"), and copy the key.
Go to Billing and add a small amount — $5–10 is plenty to start. Each page generation costs roughly $0.10–0.20 depending on the model you choose.
Open the Landing Page Builder, paste your key into the API Key field at the top. It saves automatically — you'll see "● Saved" appear. You won't need to enter it again.
Three Claude models are available. The model you choose affects cost and quality:
Start with Haiku while you're filling in your content and iterating. Switch to Sonnet or Opus for your final generation.
Each collapsible section covers one part of your page. Click any section header to collapse it after you've filled it in, keeping the form manageable.
The foundation of the whole page. Your business name appears in the navigation bar as a fallback if no logo is provided. The tagline and business type help Claude understand the right tone and visual approach for the design.
Website URL appears as a link in the footer. Email address is rendered as a clickable mailto: link in both the bio section and the footer.
Primary color is used for backgrounds, the nav bar when it's solid, and dark overlays on hero/footer images. Accent color is used for buttons, links, highlights, and decorative elements.
The Page Theme sets the overall feel: Dark & Moody uses near-black backgrounds; Light & Clean uses whites and light greys; Warm Neutral uses creams and off-whites. The Font Style guides Claude to choose appropriate Google Fonts — Elegant Serif picks typefaces like Cormorant or Playfair; Modern Sans picks something like DM Sans or Plus Jakarta Sans.
The first thing visitors see — a full-screen section with your background photo, a headline, subheadline, and a call-to-action button. The CTA Button Link is where the button sends visitors when clicked. This is typically your contact page or booking form URL.
Write the headline as a short, punchy statement (5–8 words). The subheadline can be 1–2 sentences expanding on it.
A two-column section: your photo on the left, bio text on the right. The Section Headline is the large text above your bio — something personal like "Hi, I'm Sarah" or "About the Studio" works well. Write 2–4 sentences for the bio itself. Keep it conversational and specific — tell people who you are and why you do what you do.
Three cards in a row, each with a photo, title, and short description. Use these for your main services or areas of work. The Section Headline ("What I Do Best", "Services", "My Work") sits above the grid.
Keep each card description to 2–3 sentences. Specific is better than general: "60-minute in-studio sessions for individuals and couples" is stronger than "professional portraits."
A side-by-side section that breaks up the page and drives visitors toward action — your copy on the left, a square photo on the right. The Button Link can be your contact page, a booking form, or any deep link on your site. Write the body text as a personal, direct invitation: 2–3 sentences.
Three client quotes. Keep quotes to 1–3 sentences — short quotes read better than long ones. Include the client's name and a brief role or context ("Wedding Client, 2024" or "Founder, Bloom Studio").
Paste the full URL for any platform you want to appear. Leave a field blank and that platform won't show up anywhere on the page. All four are completely optional.
The footer uses your footer photo as a background with a dark overlay. The Footer Headline is typically a final call to action — "Ready to work together?" or "Let's make something great."
The Bottom Link is useful if this landing page is separate from your main site — it gives visitors a way to see your full portfolio or navigate elsewhere. It can also be a deep link: a specific gallery, your booking calendar, or a project page.
The generated page references eight image files by exact filename. You never need to edit the HTML — just name your photos correctly and drop them in the images/ folder.
object-fit: cover, replacing a file in the images/ folder is all you need to do. No code editing, ever. The layout stays perfect regardless of the exact file you put in.
Large image files slow down your page. Before uploading, run your images through a compression tool. Target under 400KB per file — most will compress to far less without visible quality loss.
Good free tools: Squoosh (squoosh.app) for individual images, TinyPNG (tinypng.com) for batch compression. For the logo, export from your design app as a compressed PNG with transparency.
The Design Instructions section lets you give Claude additional guidance beyond what the form covers. Think of it as a short creative brief — you can steer the layout, typography, tone, spacing, or anything else about the design.
You can either paste directly into the textarea, or click Load .md file to load a text file you've already written. The content supplements your form inputs — it doesn't override your color or font choices.
Write it as plain notes, one idea per line. You don't need any special formatting. Some examples of useful instructions:
You can save your design.md file and reuse it across multiple page generations. It's a fast way to maintain consistency if you're building pages for multiple clients.
Once your form is filled in, click Generate My Landing Page at the bottom of the form. Claude writes a complete HTML document — typically 6,000–8,000 characters of code — which takes about 30 seconds.
A character counter in the center of the preview area increments as the page is built. When it's done, the live preview loads automatically on the right side of the screen.
The preview is a real, fully rendered HTML page inside an iframe. You can scroll it, check the layout, and read all the content. The images will appear as broken image icons — that's expected, since the photo files aren't loaded in the preview. The layout, colors, typography, and copy are all accurate.
Two download options appear after generation:
Downloads just the index.html file. Use this if you already have your images ready and just need the HTML.
Downloads a .zip file containing index.html and an images/ folder with a README. The README lists every image filename, the recommended dimensions, and deployment instructions. Recommended for first-time use.
Once you have your files and images ready, putting the page live takes just a few minutes.
You'll see index.html and an images/ folder. The images folder contains only a README at this point.
Name each file exactly as specified (see the Images section above). Compress them first if you haven't already.
Open index.html in your browser from your computer. The page should look complete with all images showing. Check on mobile too — resize your browser window to a narrow width.
Use FTP, your hosting control panel, or your host's file manager. Upload index.html and the entire images/ folder to the same location. If this is your homepage, upload to the root of your domain.
Open your site in a browser. If everything looks correct locally, it will look correct live.
images/ folder must be in the same directory as index.html — not inside a subfolder of it, and not one level above it.
images/logo.png (lowercase, .png extension) and is in the images/ folder at the same level as index.html. If no logo file is present, the business name text shows automatically instead.